<template>
  <div class="hello">
    <p>prop时间：{{current}}</p>
    <p>状态:{{tab_partents_status[0]}}---状态:{{tab_partents_status[1]}}---状态:{{tab_partents_status[2]}}</p>
      <div class="tab">
         <ul>
           <template  v-for="(item, index) in tab_partents_status">
              <li :class="{active:item=='active',finish:item=='finish'}" @click="changeShowIndex(index)">
                <p>{{item}}</p>
              <span></span>
             </li>
           </template>
           
         </ul>
      </div>
      <div class="tab_cnt">
        <ul>
            <li :class="{active:tab_partents_status[0]=='active',finish:tab_partents_status[0]=='finish'}" v-if="(tab_partents_status[0]=='active'&&tab_partents_show_index==0)||tab_partents_show_index==0">
              <p class="strong">]]]]]]]]]]]]]]]]]第一___一个[[[[[[[[[[[[[[[[[[[[[ 状态:{{tab_partents_status[0]}}</p>
              <div class="cn">
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
              </div>
            </li>
              <li :class="{active:tab_partents_status[1]=='active',finish:tab_partents_status[1]=='finish'}" v-if="(tab_partents_status[1]=='active'&&tab_partents_show_index==1)||tab_partents_show_index==1">
              <p class="strong">]]]]]]]]]]]]]]]]]第而一__二个[[[[[[[[[[[[[[[[[[[[[  状态:{{tab_partents_status[1]}}</p>
               <div class="cn">
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
              </div>
            </li>
               <li :class="{active:tab_partents_status[2]=='active',finish:tab_partents_status[2]=='finish'}" v-if="(tab_partents_status[2]=='active'&&tab_partents_show_index==2)||tab_partents_show_index==2">
               <p class="strong">]]]]]]]]]]]]]]]]]第一__三个[[[[[[[[[[[[[[[[[[[[[  状态:{{tab_partents_status[2]}}</p>
               <div class="cn">
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
                <p>内容，内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</p>
              </div>
            </li>
        </ul>
      </div>
  </div>
</template>

<script>
import { CountTimer } from "../lib/CountTimer";
import Vue from "vue";
import "../lib/date.js"
export default {
  name: "countTimer",
  props: ["current"],
  data() {
    return {
      diff: "",
      //父级tab的开启和结束时间
      tab_partents: [
        {
          start: "2018-01-17 22:10:10",
          end: "2018-01-17 22:10:13"
        },
        {
          start: "2018-01-17 22:10:13",
          end: "2018-01-17 22:10:16"
        },
        {
          start: "2018-01-17 22:10:16",
          end: "2018-01-17 22:10:20"
        }
      ],
      tab_partents_show_index: 0,
      //父级tab的状态  "no_start"：未开启 "active"：开启中 "finish" ：已经完成
      tab_partents_status: ["no_start", "no_start", "no_start"]
    };
  },
  created() {
    console.log("current::::",this.current)
   // this.timeDown();
   this.filter();
  },
  watch: {
    current: function (val, oldVal) {
       this.filter();
    }
  },
  methods: {
    filter() {
      this.tab_partents.forEach((item, index) => {
        //console.log(index,this.current, +new Date(item.start))
        //当前时间大于活动的结束时间，那么活动就是结束
        console.log("*******************",this.current,item.start);
        if (this.current <= +new Date(item.start)) {
          //当前时间小于活动开始时间，那么就是活动未开始
          // this.tab_partents_status[index] == "no_start";
          Vue.set(this.tab_partents_status, index, "no_start");
          console.log("tab_children:1未开启", index);
        } else if (this.current >= +new Date(item.end)) {
          // this.tab_partents_status[index] == "finish";
          Vue.set(this.tab_partents_status, index, "finish");
          console.log("tab_children:1结束", index);
        } else {
          //否者就是开始和结束之间，就是活动被激活了
          //this.tab_partents_status[index] == "active";
          Vue.set(this.tab_partents_status, index, "active");
          this.tab_partents_show_index = index;
          console.log("tab_children:1激活", index);
        }
      });
    },
    changeShowIndex(index) {
      this.tab_partents_show_index = index;
    },
    timeDown() {
      return new CountTimer({
        type: "timeUpdate",
        now: this.current,
        during: now => {
          this.current = now;
          this.filter();
        },
        end: () => {}
      });
    }
  }
};
</script>

<style lang="less" scoped >
ul,
li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.strong{
  color:red;
}
.tab {
  position: relative;
  ul {
    text-align: center;
    position: relative;
    font-size: 0;
    &:after {
      content: "";
      display: block;
      height: 10px;
      width: 100%;
      background: #333;
      top: 10px;
      position: absolute;
      z-index: 10;
    }
  }
  li {
    display: inline-block;
    position: relative;
    font-size: 16px;
    z-index: 12;
    width: 33.3%;
    box-sizing: border-box;
    margin-bottom: 20px;
    p {
      position: absolute;
      top: -30px;
      width: 100%;
      text-align: center;
    }
    &.active {
      span {
        background: orange;
      }
      &:before {
        content: "";
        width: 100%;
        height: 10px;
        top: 10px;
        left: 0;
        position: absolute;
        background: orange;
      }
    }
    &.finish {
      span {
        background: orange;
      }
      // &:after {
      //   content: "";
      //   width: 50%;
      //   height: 10px;
      //   top: 10px;
      //   left: 50%;
      //   position: absolute;
      //   background: #999;
      // }
      &:before {
        content: "";
        width: 100%;
        height: 10px;
        top: 10px;
        left: 0;
        position: absolute;
        background: orange;
      }
    }
    & + li {
      padding-left: 20px;
    }
    span {
      display: block;
      // margin: 0 auto;
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 30px;
      background: #333;
      border-radius: 100%;
    }
  }
}
.tab_cnt {
  border: 1px solid #333;
  padding: 10px;
  li {
    background: #333;
  }
  .active {
    background: orange;
  }
  .finish {
    background: #999;
  }
  p {
    text-align: center;
    line-height: 60px;
    font-size: 30px;
  }
}
</style>
